<template>
	<view class="container bg-w">
		<view class="header uni-flex uni-row flex-between">
			<uni-nav-bar title="人员详情">
				<template slot='left'>
					<view class="flex width-100 ">
						<i class='iconfont iconfanhui' @click='goBack()'></i>
					</view>
				</template>
			</uni-nav-bar>
		</view>
		<view class="container_main">
      <view class="tabs">
        <uni-segmented-control :current="current" :values="itemstab" @clickItem="onClickItem" style-type="text" active-color="#09AAE9"></uni-segmented-control>
        <scroll-view class="user_content">
          <view v-show="current === 0">
              <uni-search-bar :radius="100" @confirm="searchName" @cancel='cancelName' placeholder='请输入项目名称'></uni-search-bar>
              <view class="peoject-list" v-if="peojectList.length">
                <view class="project-card" v-for="(item,index) in peojectList" :key="index"> 
                  <view class="project-card__head" @click="goToProjectInfo(item)">
                    <view class="title">{{ item.projectName }}</view>
                    <view class="state">
                      <text>{{ item.auditStatusDesc }}</text>
                    </view>
                  </view>
                  <view class="project-card__body">
                    <view class="project-card__label">所属项目：{{ item.subProjectName }}</view>
                    <view class="project-card__label">类型：{{ item.type }}</view>
                    <view class="project-card__label">地址：{{ item.address }}</view>
                  </view>
                  <view class="project-card__foot" @click="goToChildProject(item)">
                    <view>查看测点</view>
                  </view>
                </view>
              </view>
          </view>
          <view v-show="current === 1">
            <!-- <uni-search-bar :radius="100" @confirm="searchName" @cancel='cancelName' placeholder='请输入项目名称'></uni-search-bar> -->
            <uni-collapse :accordion="true">
              <uni-collapse-item v-for="(item,index) in workPlanLists" :key="index" :title="item.projectName">
                <uni-list>
                  <view>
                    <uni-list-item title="截止时间" :rightText="item.completedTime"></uni-list-item>
                    <uni-list-item title="子项总数" :rightText="String(item.subProjectCount) || '--'"></uni-list-item>
                    <uni-list-item title="负责子项" :rightText="String(item.subProjectResponsibleCount) || '--'"></uni-list-item>
                    <uni-list-item title="测点总数" :rightText="String(item.standardProCount) || '--'"></uni-list-item>
                  </view>
                </uni-list>
                <text class="prj-title">项目工序计划</text>
                <view class="uni-padding-wrap uni-common-mt">
                  <view class="progress-box" v-for="(itemChild,childIndex) in plan" :key="childIndex">
                    <view class="progress_category">
                      <p class="progress_category_label">{{itemChild.title1}}
                        <text v-if="childIndex==0">{{item.tasksCount}}</text>
                        <text v-if="childIndex==1">{{item.tasksEveryDay}}</text>
                        <text v-if="childIndex==2">{{item.tasksWeekly}}</text>
                        <text v-if="childIndex==3">{{item.tasksPerMonth}}</text>
                      </p>
                      <canvas :canvas-id="'canvasArcbar'+index+childIndex" :id="'canvasArcbar'+index+childIndex" class="charts3" :style="{'width':cWidth3*pixelRatio+'px','height':cHeight3*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth3*(pixelRatio-1)/2+'px','margin-top':-cHeight3*(pixelRatio-1)/2+'px'}"></canvas>
                      <p class="progress_category_label">{{itemChild.title2}}
                        <text v-if="childIndex==0">{{item.completeProcessDetailedProCount}}</text>
                        <text v-if="childIndex==1">{{item.tasksEveryDayComplete}}</text>
                        <text v-if="childIndex==2">{{item.tasksWeeklyComplete}}</text>
                        <text v-if="childIndex==3">{{item.tasksPerMonthComplete}}</text>
                      </p>
                    </view>
                  </view>
                </view>
              </uni-collapse-item>
            </uni-collapse>
          </view>
          <view v-show="current === 2">
            <view class="explain">
              <text class="order">基础信息</text>
              <view>
                <uni-list>
                  <uni-list-item>
                    <template slot='body'>
                      <view class="buildList-body">
                        <view class="color-6 flex algin-i-c">
                          <view>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</view>
                          <text class="txt_message">{{username}}</text>
                        </view>
                      </view>
                    </template>
                  </uni-list-item>
                  <uni-list-item>
                    <template slot='body'>
                      <view class="buildList-body">
                        <view class="color-6 flex algin-i-c">
                          <view>联系方式：</view>
                          <text class="txt_message">{{phone}}</text>
                        </view>
                      </view>
                    </template>
                  </uni-list-item>
                </uni-list>
              </view>
            </view>
            <view class="explain">
              <text class="order">打卡记录</text>
              <view>
                <view>
                  <uni-calendar
                  :insert="true"
                  :lunar="false"
                  :headerBar="true"
                  :selected="selected"
                  :start_date="startData"
                  :end_date="endDate"
                  @change="dateChange"
                  @monthSwitch="monthChange"/>
                </view>
                <view class="clock_records" v-for="(item,index) in attenList" :key="index">
                  <view v-if="item.clockStatus == 0">
                    <p class="time_add">
                      <span class="clock-address"><uni-icons type="location" size="14" color="blue"></uni-icons>{{item.address || "--"}}</span>
                      <text class="clock_time">{{item.createTime || "--"}}</text>
                    </p>
                  </view>
                  <view v-else-if="item.clockStatus == 1">
                    <p class="reson_time_list">
                      <span class="clock-address"><text>类别：</text>请假</span>
                      <text class="clock_time"><text>开始时间：</text>{{item.beginTime}}</text>
                    </p>
                    <p class="reson_time_list">
                      <span class="clock-address"><text>事由：</text>{{item.reason}}</span>
                      <text class="clock_time"><text>结束时间：</text>{{item.endTime}}</text>
                    </p>
                  </view>
                  <view v-else-if="item.clockStatus == 2">
                    <p><span class="clock-address"><text>类别：</text>补卡</span></p>
                    <p class="reson_time_list">
                      <span class="clock-address"><text>事由：</text>{{item.reason}}</span>
                      <text class="clock_time">{{item.createTime || "--"}}</text>
                    </p>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view >
      </view>
			
    </view>
	</view>
</template>

<script>
import uCharts from '@/utils/u-charts.js'
import { getProjectWithUser, getClickList, getMonthClickDays, getWorkPlanDetail } from "@/common/api/map"

export default {
	data() {
		return {
			userId: null,
			username: "",
			phone: "",
			selected: [],
			attenList: [],
			startData: "2021-1-1",
					endDate: "2021-12-31",
			itemstab: ["负责子项", "工作计划","考勤管理"],
					current: 0,
			page: {
						pageNo: 1, //当前页
						pageSize: 10, //每页显示的页数
						subProjectName: null,
					},
			peoplePage:{
			  pageNo: 1, //当前页
						pageSize: 10, //每页显示的页数
			},
			peojectList:[],
			clickForm:{
			  userId: "", // 员工ID
			  clockStatus: "", //打卡状态
			  reason: "",
			  latitude: "", //纬度
			  longitude: "", //经度
			  subProjectId: "", //子项目id
			  createTime: "", //打卡时间
			  address: "" //地点
			},
			// 工作计划模块
			plan:[{
				title1:'总施工任务',
				title2:'累计完成任务',
			},{
				title1:'今日计划',
				title2:'今日完成任务',
			},{
				title1:'本周计划',
				title2:'本周完成任务',
			},{
				title1:'本月计划',
				title2:'本月完成任务',
			}],
			colors: ["#00009f", "#ff5500", "#e11a74", "#7000a8"],
			workPlanLists: [],
			pixelRatio: 1,
			arcbarData: {
				"series": []
			},
			canvasArcbar:null,
			total: 0,
			totalPage:0,
		}
	},
	onLoad(option) {
		if (option.userId && option.userName && option.phone) {
			this.userId = option.userId
			this.username = option.userName
			this.phone = option.phone
		}
	},
    onReady() {
		this.cWidth3 = uni.upx2px(190);
		this.cHeight3 = uni.upx2px(190);
		this.arcbarWidth = uni.upx2px(16);
		this.getProjectLists()
		this.getClickLists()
		this.monthChange()
		this.getArcbarData()
    },
	methods: {
      onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
      getProjectLists(){
        let params = {
          userId: this.userId,
          ...this.page
        }
				getProjectWithUser(params).then(res => {
					if(res.code == 20000){
						if(res.data){
							let data = res.data.records;
							this.total = res.data.total;
							this.totalPage = res.data.pages;
							this.peojectList = data
						}
					}
				})
			},
      // 取消搜索
      cancelName(){
				this.peojectList = [];
				this.page.pageNo = 1;
				this.page.subProjectName = null;
				this.getProjectLists()
        this.getArcbarData()
			},
      // 搜索项目名称
      searchName(e){
				this.peojectList = [];
				this.page.subProjectName = e.value
				this.getProjectLists()
        this.getArcbarData()
			},
      /**
			 * 查询打卡记录列表
			 * @method getClickLists
			 * @param {Object} time 选择的时间
			 */
			getClickLists: function(time) {
				let date = time ? time : this.getTime().split(" ")[0]
				getClickList({
					date: date,
					userId: this.userId
				}).then(res=>{
					this.attenList = res.data
				})
			},
			/**
			 * 日期月份改变
			 * @method dateChange & monthChange
			 * @param {Object} dateobj 选择后返回的值
			 * @param {Object} monthobj 选择后返回的值
			 */
			dateChange: function(dateobj) {
				this.selectDate = dateobj.fulldate
				this.getClickLists(dateobj.fulldate)
			},
			monthChange: function(monthobj) {
				let month = ""
				if(monthobj){
					let monthType = (monthobj.month+'').length < 2 ? '0'+ monthobj.month : monthobj.month
					month = monthobj.year + "-" + monthType
				}else{
					month = this.getMonth()
				}
				// 获取当前选择月打卡日期列表
				getMonthClickDays({
					date: month,
					userId: this.userId
				}).then(res=>{
					let dateList = res.data;
					let obj = {};
					if(dateList.length>0){
						dateList.forEach(item=>{
							this.selected.push({ date: item })
						})
						this.selected = this.selected.reduce(function(item, next) {
							obj[next.date] ? '' : obj[next.date] = true && item.push(next);
							return item;
						}, []);
					}
				})
			},
      getTime:function(){
        let date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
        minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
        second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        month >= 1 && month <= 9 ? (month = "0" + month) : "";
        day >= 0 && day <= 9 ? (day = "0" + day) : "";
        let timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
        return timer;
      },
      getMonth:function(){
        let date = new Date(),
          year = date.getFullYear(),
          month = date.getMonth() + 1;
        month >= 1 && month <= 9 ? (month = "0" + month) : "";
        let timer = year + '-' + month
        return timer;
      },

      // 工作计划模块
      getArcbarData() {
        let param = this.peoplePage;
        param["userId"] = this.userId;
        param["postType"] = 0
				getWorkPlanDetail(param).then(res=>{
					if(res.code == 20000){
						this.totalPage = res.data.pages;
						this.total = res.data.total
						this.workPlanLists = res.data.records
						this.workPlanLists.forEach((item,index)=>{
							let a=Math.round(item.completeProcessDetailedProCount/item.tasksCount * 100) / 100>1?1:Math.round(item.completeProcessDetailedProCount/item.tasksCount * 100) / 100
							let b=Math.round(item.tasksEveryDayComplete/item.tasksEveryDay * 100) / 100>1?1:Math.round(item.tasksEveryDayComplete/item.tasksEveryDay * 100) / 100
							let c=Math.round(item.tasksWeeklyComplete/item.tasksWeekly * 100) / 100>1?1:Math.round(item.tasksWeeklyComplete/item.tasksWeekly * 100) / 100
							let d=Math.round(item.tasksPerMonthComplete/item.tasksPerMonth * 100) / 100>1?1:Math.round(item.tasksPerMonthComplete/item.tasksPerMonth * 100) / 100
							item.plan=[a,b,c,d]
							item.plan.forEach((childItem,childIndex)=>{
								this.arcbarData.series = [],
								this.arcbarData.series.push(Object.assign({},
									{
										data: childItem
									},{
										color: this.colors[childIndex]
									}));
								this.showArcbar("canvasArcbar"+ index+ childIndex, this.arcbarData);
							})
						})
					}
				})
			},
      showArcbar(canvasId, chartData) {
        let _self = this
				this.canvasArcbar=new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 11,
					title: {
						name: Math.round(chartData.series[0].data * 100) + '%',
						color: chartData.series[0].color,
						fontSize: 25 * _self.pixelRatio
					},
					subtitle: {
						name: chartData.series[0].name,
						color: '#666666',
						fontSize: 15 * _self.pixelRatio
					},
					extra: {
						arcbar: {
							type: 'circle', //整圆类型进度条图
							width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度
							startAngle: 0.5 //整圆类型只需配置起始角度即可
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.cWidth3 * _self.pixelRatio,
					height: _self.cHeight3 * _self.pixelRatio,
					dataLabel: true,
				});
			},
      goToChildProject(item){
				uni.navigateTo({
				  url: `/pages/projectAudit/ProjectAudit?projectId=${item.projectId}&subProjectId=${item.subProjectId}&assessmentId=${item.assessmentId}`
				});
			},
      goToProjectInfo(item) {
				uni.navigateTo({
				  url: `/pages/basicInformation/BasicInformation?projectId=${item.projectId}`
				});
			}
		}
	}
</script>

<style lang="less">
.container_main{
  position: relative;
  top: 83px;
  overflow-y: scroll;
  height: calc(100% - 84px);
  &::-webkit-scrollbar {
    width: 1px;
  }
  .txt_message {
    position: absolute;
    right: 10px;
  }
  .tabs{
    .segmented-control{
      height: 100rpx;
    }
    .user_content{
      position: relative;
      height: calc(100% - 200rpx);
    }
    .peoject-list{
      padding: 16rpx;
      background: #f9f9f9;
      .project-card{
        margin-bottom: 16rpx;
        color: #8C8C8C;
        border-radius: 10rpx;
        background: #fff;
        box-shadow: 0px 0px 5px rgba(0,0,0,.3);
        >.project-card__head{
          display: flex;
          height: 64rpx;
          line-height: 64rpx;
          color: #333;
          border-bottom: 1px solid #D6D6D6;
          border-radius: 10rpx 10rpx 0 0;
          >.title{
            flex: 1;
            padding: 0 20rpx;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          >.state{
            width: 150rpx;
            color: #09aae9;
            text-align: center;
            >.uni-icons{
              /deep/ span{
                font-size: 30rpx;
              }
            }
          }
        }
        >.project-card__body{
          padding: 10rpx 20rpx 0 36rpx;
          .project-card__label{
            position: relative;
            margin-bottom: 10rpx;
          }
          .project-card__label::before {
            content: '';
            position: absolute;
            top: 14rpx;
            left: -18rpx;
            display: block;
            width: 6rpx;
            height: 6rpx;
            border-radius: 50%;
            border: 1px solid #09aae9;
            background: #09aae9;
          }
        }
        >.project-card__foot{
          display: flex;
          padding: 20rpx 0;
          justify-content: center;
          >view{
            width: 250rpx;
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            color: #fff;
            border-radius: 10rpx;
            background: #09aae9;
          }
        }
      }
    }
    
    .clock_records{
      margin-top: 2px;
      padding: 5px 20px;
      font-size: 16px;
      background-color: #fff;
      border-top: 1px solid #eee;
      &:hover{
        background-color: #ccc
      }
      .reson_time_list{
        display: flex;
        height: 30px;
        line-height: 30px;
        justify-content: space-between;
        .clock-address{
          display: inline-block;
          width: 44%;
          overflow: hidden;
          text-overflow:ellipsis; white-space: nowrap;
        }
      }
      .time_add{
        display: flex;
        height: 50px;
        line-height: 50px;
        justify-content: space-between;
        .clock-address{
          display: inline-block;
          width: 60%;
          overflow: hidden;
          text-overflow:ellipsis; 
          white-space: nowrap;
        }
      }
      .clock_time{
        position: relative;
        overflow: hidden;
        text-overflow:ellipsis; 
        white-space: nowrap;
      }
    }
    .prj-title{
      display: block;
      position: relative;
      // width: 100%;
      height: 86rpx;
      line-height: 86rpx;
      padding-left: 40rpx;
      background: #fff;
      margin-top: 10rpx;
    }
    .prj-title:after{
      content: '';
      position: absolute;
      top: 50%;
      left: 2%;
      width: 10rpx;
      height: 30rpx;
      border-radius: 4rpx;
      transform: translateY(-50%);
      background-color: #6D6D6D;
    }
    .uni-padding-wrap{
      width: 100%;
      box-sizing: border-box;
      padding: 0 20rpx 40rpx;
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      background: #fff;
      .progress-box{
        width: 46%;
        border-radius: 20rpx;
        box-shadow: 0 0 10rpx 4rpx #eee;
        padding: 10rpx;
        margin-bottom: 20rpx;
        // /deep/.uni-progress-bar{
        // 	border-radius: 6px;
        // 	overflow: hidden;
        // }
        // /deep/.uni-progress-inner-bar{
        // 	border-radius: 6px 0 0 6px;
        // }
        .progress_category{
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          .progress_category_label{
            width: 100%;
            text-align: center;
            height: 60rpx;
            line-height: 60rpx;
          }
          .progress_category_val{
            color: #000;
            padding: 20rpx;
          }
        }
      }
    }
    /deep/.uni-collapse-cell__title-text {
      text-indent: 20rpx;
    }
      
    /deep/.uni-collapse-cell__title-text::before{
      content: '';
      position: absolute;
      top: 50%;
      left: 2%;
      width: 10rpx;
      height: 30rpx;
      border-radius: 4rpx;
      transform: translateY(-50%);
      background-color: #09AAE9;
    }
    /deep/.uni-collapse .uni-list-cell {
      padding-left: 0 !important;
    }
    /deep/.uni-collapse-cell--open{
      background-color: #fff;

    }
    /deep/.uni-collapse-cell{
      border-color: #F2F2F2;
    }
  }
}


</style>